<template>
  <div class="main-nav">
    <nav-bar class="home-nav">
      <div class="left" slot="left" @click="goBack"><van-icon name="arrow-left" size="24" /></div>
      <div slot="center">历史数据</div>
    </nav-bar>
    <div class="main-histy">
      <div class="month">
        <div :class="active==index?'month-one':'month-two'" v-for="(item,index) in text" @click="swtich(index)">
          <div>{{item}}</div>
        </div>
      </div>
      <div class="more-hsty">
        <van-list
          v-model="loading"
          :finished="finished"
          :immediate-check="check"
          finished-text="没有更多了"
          @load="onLoad"
        >
          <div class="histy" v-for="item in historyList">
            <div class="hsty-one">
              <div class="hsty-o">
                {{item.base_name}}{{item.house_name}}
                <span class="hsty-t" v-if="item.type==1&&item.scope==1">温度<span>{{item.sources}}℃</span>超出设定的<span>【{{item.scope_min}}℃-{{item.scope_max}}℃】</span>范围</span>
                <span class="hsty-t" v-if="item.type==1&&item.scope==2">温度<span>{{item.sources}}℃</span>低于设定的<span>【{{item.scope_min}}℃-{{item.scope_max}}℃】</span>范围</span>
                <span class="hsty-t" v-if="item.type==2&&item.scope==1">湿度<span>{{item.sources}}%</span>超出设定的<span>【{{item.scope_min}}%-{{item.scope_max}}%】</span>范围</span>
                <span class="hsty-t" v-if="item.type==2&&item.scope==2">湿度<span>{{item.sources}}%</span>低于设定的<span>【{{item.scope_min}}%-{{item.scope_max}}%】</span>范围</span>

                <span class="hsty-f" v-if="item.type==1">{{item.exceed}}℃</span>
                <span class="hsty-f" v-else>{{item.exceed}}%</span>
              </div>
            </div>
            <div class="hsty-date">{{item.create_time}}</div>
          </div>
        </van-list>
      </div>
    </div>
  </div>
</template>

<script>
  import NavBar from "@/components/common/navbar/NavBar";
  import { List } from 'vant';
  export default {
    name: "history",
    components:{
      NavBar
    },

    data(){
      return {
        historyList:[],
        loading: false,
        finished: false,
        checked: true,
        check:false,
        text:['近一月','近一周'],
        active:0,
        page:1,
        limit:10,
        month:1
      }
    },

    created() {
      var month = this.month;
      this.getHistoryList(month);
    },
    methods: {
      getHistoryList(month) {
        let that = this;
        that.historyList = [];
        that.$http.get('/api/monitorApi/history', {month:month,page:1,limit:that.limit}, r => {
          // 数据全部加载完成
          if (r.data.length == 0) {
            this.finished = true;
          }
          that.historyList = that.historyList.concat(r.data);
        })
      },
      onLoad() {
        let that = this;
        that.page++;
        that.$http.get('/api/monitorApi/history', {month:that.month,page:that.page,limit:that.limit}, r => {
          that.historyList = that.historyList.concat(r.data);
          // 加载状态结束
          that.loading = false;
          // 数据全部加载完成
          if (r.data.length == 0) {
            this.finished = true;
          }
        })
      },
      swtich(index){
        let that = this;
        var month = index*1+1
        that.page=1;
        that.month=month;
        that.historyList = [];
        that.$http.get('/api/monitorApi/history', {month:month,page:1,limit:that.limit}, r => {
          that.historyList = that.historyList.concat(r.data);
          that.active=index;
          that.loading = false;
          that.finished = false;
          that.check = false;
          // 数据全部加载完成
          if (r.data.length == 0) {
            this.finished = true;
          }
        })
      },
      goBack(){
        this.$router.go(-1);
      },
    }
  }
</script>

<style scoped>
  .record_box{
    margin: 10px;
    background: #ffffff;
    border-radius: 8px;
  }
  .record_box .title {
    padding: 10px;
  }
  .record_box .title h2{
    padding-left: 5px;
    font-size: .32rem;
    /*color: var(--color-tint);*/
    border-left: 3px solid var(--color-tint);
    font-weight: normal;
  }

</style>
